<template>
  <div id="x6-group-container"></div>
</template>

<script>
import { Graph } from '@antv/x6'
import { register } from '@antv/x6-vue-shape'
import ctmNode from '@/views/x6node/ctmNode.vue'

export default {
  name: 'x6Group',
  data() {
    return {
      graph: null,
    }
  },
  mounted() {
    this.initX6()

    this.createGroup1()
    this.createGroup2()

    this.createEdge()
  },
  methods: {
    initX6() {
      register({
        shape: 'custom-vue-x6node',
        width: 100,
        height: 100,
        component: ctmNode,
      })

      this.graph = new Graph({
        container: document.getElementById('x6-group-container'),
        width: '100%',
        height: 300,
        background: {
          color: '#F2F7FA',
        },
      })
    },
    createGroup1() {
      const parent = this.graph.addNode({
        id: 'group1',
        x: 10,
        y: 10,
        width: 600,
        height: 260,
        zIndex: 1,
        label: 'Parent\nParent\nParent',
      })

      const child1 = this.graph.addNode({
        id: 'child1',
        x: 20,
        y: 20,
        width: 100,
        height: 50,
        label: 'Child',
        zIndex: 10,
      })

      const ctmNode1 = this.graph.addNode({
        id: 'node1',
        shape: 'custom-vue-x6node',
        width: 170,
        height: 154,
        x: 360,
        y: 20,
      })

      parent.addChild(child1)
      parent.addChild(ctmNode1)
    },
    createGroup2() {
      const parent = this.graph.addNode({
        id: 'group2',
        x: 700,
        y: 10,
        width: 600,
        height: 260,
        zIndex: 1,
        label: 'Parent\nParent\nParent',
      })
      const child1 = this.graph.addNode({
        id: 'child3',
        x: 750,
        y: 20,
        width: 100,
        height: 50,
        label: 'Child',
        zIndex: 10,
      })
      parent.addChild(child1)
    },
    createEdge() {
      this.graph.addEdges([
        { source: 'child1', target: 'group2', label: '节点-组合' },
      ])
      this.graph.addEdges([
        { source: 'child1', target: 'child3', label: '节点-节点' },
      ])
      this.graph.addEdges([
        { source: 'group1', target: 'group2', label: '组合-组合' },
      ])
      this.graph.addEdges([
        { source: 'group1', target: 'child3', label: '组合-节点' },
      ])
    },
  },
}
</script>

<style scoped></style>
